<template>
  <div class="w-full max-w-md mx-auto min-h-screen bg-white relative">
    <!-- 顶部标题 -->
    <div class="w-full h-14 flex items-center justify-center">
      <h1 class="text-3xl font-inter font-semibold text-black text-shadow-custom">交　　班</h1>
    </div>

    <!-- 筛选标签 -->
    <div class="px-4 mt-4">
      <div class="relative bg-[#E6EDF5] rounded-full h-9 flex items-center px-2" style="width: 225px;">
        <!-- 活动标签背景 -->
        <div 
          class="absolute h-7 bg-[#219F78] rounded-full transition-all duration-300"
          :style="{
            width: '55px',
            left: `${getActiveTabPosition()}px`,
            top: '4px'
          }"
        ></div>
        
        <!-- 标签按钮 -->
        <div class="flex-1 flex justify-between items-center">
          <button 
            v-for="(tab, index) in tabs" 
            :key="tab.id"
            @click="activeTab = tab.id"
            :class="[
              'relative z-10 h-7 rounded-full text-xs font-nunito transition-all duration-200 w-[55px] text-center flex items-center justify-center',
              activeTab === tab.id ? 'text-white font-bold' : 'text-[#0A1629] font-normal'
            ]"
          >
            {{ tab.label }}
          </button>
        </div>
        
        <!-- 筛选图标 -->
        <div class="ml-2">
          <img :src="filterIcon" alt="筛选" class="w-4 h-4">
        </div>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="w-full h-px bg-gray-300 my-4"></div>

    <!-- 任务列表 -->
    <div class="px-4 space-y-4 pb-24">
      <TaskCard 
        v-for="task in filteredTasks" 
        :key="task.id"
        :task="task"
        @select="toggleTaskSelection"
      />
    </div>

    <!-- 上传按钮 -->
    <div class="fixed bottom-20 left-1/2 transform -translate-x-1/2">
      <button 
        class="w-56 h-9 bg-primary-500 rounded-lg shadow-lg flex items-center justify-center"
        @click="handleUpload"
      >
        <span class="text-white text-sm font-poppins font-bold">已选交班任务上传</span>
      </button>
    </div>

    <!-- 底部导航栏 -->
    <NavBar :active-tab="'交接'" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import TaskCard from './TaskCard.vue'
import NavBar from './NavBar.vue'
import filterIcon from '/assets/CodeBubbyAssets/10069_20065/13.svg'

// 模拟数据
const tasks = ref([
  {
    id: 1,
    title: '待办001',
    type: 'todo',
    time: '2025.09.10，19:23:32',
    selected: false,
    icon: '/assets/CodeBubbyAssets/10069_20065/11.svg',
    actionIcon: '/assets/CodeBubbyAssets/10069_20065/12.svg',
    bgColor: 'bg-primary-600'
  },
  {
    id: 2,
    title: '知会001',
    type: 'notice',
    time: '2025.09.10，15:33:45',
    selected: false,
    icon: '/assets/CodeBubbyAssets/10069_20065/9.svg',
    actionIcon: '/assets/CodeBubbyAssets/10069_20065/10.svg',
    bgColor: 'bg-primary-50'
  },
  {
    id: 3,
    title: '投诉001',
    type: 'complaint',
    time: '2025.09.10，11:23:42',
    selected: false,
    icon: '/assets/CodeBubbyAssets/10069_20065/6.svg',
    actionIcon: '/assets/CodeBubbyAssets/10069_20065/7.svg',
    bgColor: 'bg-primary-50'
  }
])

const tabs = ref([
  { id: 'all', label: '全　部' },
  { id: 'todo', label: '待　办' },
  { id: 'notice', label: '知　会' },
  { id: 'complaint', label: '投　诉' }
])

const activeTab = ref('all')

// 计算属性：根据激活的标签筛选任务
const filteredTasks = computed(() => {
  if (activeTab.value === 'all') {
    return tasks.value
  }
  return tasks.value.filter(task => task.type === activeTab.value)
})

// 获取活动标签位置
const getActiveTabPosition = () => {
  const activeIndex = tabs.value.findIndex(tab => tab.id === activeTab.value)
  return activeIndex * 55 + 2
}

// 切换任务选择状态
const toggleTaskSelection = (taskId) => {
  const task = tasks.value.find(t => t.id === taskId)
  if (task) {
    task.selected = !task.selected
  }
}

// 处理上传
const handleUpload = () => {
  const selectedTasks = tasks.value.filter(task => task.selected)
  if (selectedTasks.length === 0) {
    alert('请至少选择一个任务进行上传')
    return
  }
  
  // 预留接口对接位置
  console.log('上传选中的任务:', selectedTasks)
  // TODO: 调用上传接口
  // uploadTasks(selectedTasks)
}

// 预留接口对接方法
const uploadTasks = async (tasks) => {
  // 后续实现接口对接
  // const response = await fetch('/api/tasks/upload', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ tasks })
  // })
  // return await response.json()
}
</script>

<style scoped>
.text-shadow-custom {
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>